<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
    <h:head>
        <title>
            <ui:insert name="title"></ui:insert>
            - Comprobantes de Pago Electronicos - Perú
        </title>
        <ui:insert name="header">
            <ui:include src="header.xhtml"/>
        </ui:insert>

        <style type="text/css">

            #mnConfig span.ui-icon-triangle-1-s {
                background-position: -192px -112px;
            }

            .ui-dialog {
                /*corrige el problema "la cabecera de la ventana modal no se muestra"*/
                top: 10% !important;
            }

                /*
               .ui-menubar {
                   z-index: 20 !important;
                   overflow: visible !important;
               } */

            .ui-layout-north .ui-layout-unit-content {
                overflow: visible !important;
            }

            ul.ui-menu-list {
                /*width: 290px;*/
                width: 100%;
                position: static;
            }

            .ui-accordion .ui-accordion-content {
                margin-top: -1px;
                overflow: hidden;
                padding: 0 3px 0 5px;
            }

            .ui-menu .ui-menuitem-link {
                width: 100%;
            }

            .ui-menu-dynamic {
                /*corrige el problema del MenuButton que se oculta en una pantalla modal*/
                z-index: 2000 !important;
            }

            .ui-carousel-header .ui-carousel-header-title {
                width: 50%;
            }

            #menuForm div.ui-menu {
                width: 100%;
                padding: 0.1px;
            }

            #center {
                top: 64px !important;
            }

            #left {
                top: 64px !important;
            }

            .ui-toolbar {
                margin-bottom: 10px;
                margin-top: 10px;
            }

            .gridContent .ui-panel-content {
                text-align: center;
            }

            #roles div.ui-tabs-panels {
                height: 5px;
                padding: 0px;
            }
        </style>
    </h:head>


    <h:body>

        <p:growl id="messages" widgetVar="messages" showDetail="true" life="4000" sticky="false" autoUpdate="false" globalOnly="true"/>

        <p:layout fullPage="true">
            <p:layoutUnit id="top" position="north" size="70" closable="false" collapsible="false"
                          minSize="50">
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="295" style="background: url('../resources/images/bar.jpg') repeat-x scroll">
                        </td>
                        <td width="40%" style="background: url('../resources/images/bar.jpg') repeat-x scroll">
                        </td>
                        <td align="right" style="background: url('../resources/images/bar.jpg') repeat-x scroll">
                        </td>
                    </tr>

                </table>

            </p:layoutUnit>

            <p:layoutUnit id="center" position="center" resizable="false" style="top:70px">
                <ui:insert name="content"/>
                <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
                <p:dialog modal="true" widgetVar="statusDialog" showHeader="false" width="245"
                          resizable="false" draggable="false" closable="false" position="center" appendTo="@(body)">
                    <p:graphicImage value="../resources/images/ajaxloadingbar.gif" />
                </p:dialog>
            </p:layoutUnit>
        </p:layout>
        <ui:insert name="modal"/>
    </h:body>

</f:view>
</html>